import React from 'react';
import { sleep } from 'antd-mobile/es/utils/sleep'
const Coupon = () => {
    const [couponlist, SetCouponList] = React.useState<any>([]);
    const [hasMore, SethasMore] = React.useState(false);
    const [page, SetPage] = React.useState(1)
    const [status, SetStatus] = React.useState('all')

    React.useEffect(() =>{
        GetCouponData();
    },[status])

    const GetCouponData = async() =>
    {
        let result = await React.HTTP.post('/business/coupon', {
            busid: React.Business.id,
            page: page,
            status: status
        })

        if(result.code == 0)
        {
            //没有更多数据
            SethasMore(false);
            return false
        }
        else
        {
            //设置分页和列表合并
            SethasMore(true)
            SetCouponList(couponlist.concat(result.data))
            SetPage(page + 1)
        }
    }

    const OnRefresh = async() =>
    {
        SetPage(1)
        SetCouponList([])
        SethasMore(true)

        await sleep(1000);
        await GetCouponData();
    }

    const loadMore = async() => 
    {
        // await sleep(1000)
        GetCouponData()
    }
    
    const TabChange = async(val: string) =>
    {
        SetStatus(val)
        SetCouponList([])
        // await sleep(1000)
        // await OnRefresh();
        SetPage(1)
    }

    return (
        <>
            <link rel="stylesheet" href="/assets/css/coupon.css"></link>
            {/* 选项卡 */}
            <React.UI.Tabs activeKey={status} onChange={TabChange}>
                <React.UI.Tabs.Tab title='全部' key='all'>
                </React.UI.Tabs.Tab>
                <React.UI.Tabs.Tab title='未使用' key='1'>
                </React.UI.Tabs.Tab>
                <React.UI.Tabs.Tab title='已使用' key='0'>
                </React.UI.Tabs.Tab>
            </React.UI.Tabs>

            {/* 列表结构  */}
            <React.UI.PullToRefresh onRefresh={OnRefresh}>
                <React.UI.List>
                    <div className="coupon_list">
                        {
                            couponlist.map((item: any) =>{
                                return(
                                    <div className="coupon_item" key={item.id}>
                                        <div className="item_content">
                                            <React.Router.NavLink to={`/coupon/info?cid=${item.coupon.id}`}>
                                                <div className="left">
                                                {parseFloat(item.coupon.rate) * 100}<span>折</span>
                                                </div>
                                                <div className="right">
                                                    <div>{item.coupon.title}</div>
                                                    <div>开始时间：{item.coupon.createtime_text}</div>
                                                    <div>结束时间：{item.coupon.endtime_text}</div>
                                                    <div>领取仅限量 {item.coupon.total} 张</div>
                                                </div>
                                            </React.Router.NavLink>
                                        </div>
                                        <div className="item_btn">
                                            <React.UI.Button size='small' color='primary' disabled={!parseInt(item.status)}>
                                                {item.status == '0' ? '已使用' : '未使用'}
                                            </React.UI.Button>
                                        </div>
                                    </div>
                                )
                            })
                        }        
                    </div>
                </React.UI.List>
                {/* 列表滚动到底部自动加载更多数据。 */}
                <React.UI.InfiniteScroll loadMore={loadMore} hasMore={hasMore} />
            </React.UI.PullToRefresh>
        </>
    )
}
export default Coupon;
